{% load staticfiles %}
{% load myfilter %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <link rel="shortcut icon" href="{% static '' %}velonic/img/favicon_1.ico">

        <title>产品中心{% if word %} : {{ word.keyword }}{% endif %}</title>

        <!-- DataTables -->
        <link href="{% static '' %}velonic/css/datatables/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
        <link href="{% static '' %}velonic/css/datatables/buttons.bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="{% static '' %}velonic/css/datatables/fixedHeader.bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="{% static '' %}velonic/css/datatables/responsive.bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="{% static '' %}velonic/css/datatables/scroller.bootstrap.min.css" rel="stylesheet" type="text/css" />

        <!-- Bootstrap core CSS -->
        <link href="{% static '' %}velonic/css/bootstrap.min.css" rel="stylesheet">
        <link href="{% static '' %}velonic/css/bootstrap-reset.css" rel="stylesheet">
        <link href="{% static '' %}velonic/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

        <!--Animation css-->
        <link href="{% static '' %}velonic/css/animate.css" rel="stylesheet">

        <!--Icon-fonts css-->
        <link href="{% static '' %}velonic/css/font-awesome.css" rel="stylesheet" />
        <link href="{% static '' %}velonic/css/ionicons.min.css" rel="stylesheet" />
        <link href="{% static '' %}velonic/css/material-design-iconic-font.min.css" rel="stylesheet" />

        <!-- Plugins css -->
        <link href="{% static '' %}velonic/css/component.css" rel="stylesheet">
        <link href="{% static '' %}velonic/css/sweet-alert.min.css" rel="stylesheet">


        <!-- Custom styles for this template -->
        <link href="{% static '' %}velonic/css/style.css" rel="stylesheet">
        <link href="{% static '' %}velonic/css/helper.css" rel="stylesheet">
        

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
          <script src="js/respond.min.js"></script>
        <![endif]-->


    </head>


    <body>

        <!-- Aside Start-->
        {% include 'velonic/block/side_nav.html' %}
        <!-- Aside Ends-->


        <!--Main Content Start -->
        <section class="content">
            
            <!-- Header -->
            {% include 'velonic/block/header.html' %}
            <!-- Header Ends -->


            <!-- Page Content Start -->
            <!-- ================== -->

            <div class="wraper container-fluid">
                <div class="page-title"> 
                    <h3 class="title">公共产品</h3>
                </div>


                        <div class="row">
                            <div class="col-md-11">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">产品信息  {% if word %} - {{ word.keyword }} <i class="glyphicon glyphicon-download-alt"><a target="_blank" href="{% url 'downloadcsv' %}?type=p&wd={{ word.id }}">下载数据</a></i>{% endif %}</h3>
                                    </div>
                                    <div class="panel-body">

                                        <table id="datatable" class="table table-striped table-bordered">
                                            <thead>
                                                <tr>
                                                <th>产品主图</th>
                                                <th>价格</th>
                                                <th>心愿单</th>
                                                <th>投票</th>
                                                <th>评分</th>
                                                <!--<th>评论</th>-->
                                                <th>最近成交</th>
                                                <th>总订单</th>
                                                <th>更新时间</th>
                                                <th>操作</th>
                                                </tr>
                                            </thead>

                                            <tbody>
                                            {% for product in productList %}
                                              <tr>
                                                <td><a href="javascript:;" class="link-compare"><label class="compare"><input type="checkbox" value="{{ product.product_id }}"><input type="hidden" name="compare-img" value="{{ product.thumb }}">对比</label></a><br/><a href="{% url 'product_info' product.product_id %}" target="_blank" class="preview" data-src="{{ product.thumb }}"><img data-src="{{ product.thumb }}" class="img-thumbnail" alt="{{ product.title }}" src="{{ product.thumb }}" data-holder-rendered="true" style="width: 60px; height: 60px;"></a></td>
                                                <td class="price-{{ product.product_id }}">{% ifnotequal product.low_price product.high_price %}{{ product.low_price|calPrice:product.discount }}<br>-<br>{{ product.high_price|calPrice:product.discount }}{% else %}{{ product.high_price|calPrice:product.discount }}{% endifnotequal %}</td>
                                                <td class="wish-{{ product.product_id }}">{{ product.wish_list }}</td>
                                                <td class="votes-{{ product.product_id }}">{{ product.votes }}</td>
                                                <td class="rating-{{ product.product_id }} {% if not product.average_star_rating %}loading{% endif %}">{{ product.average_star_rating }}</td>
                                                <!--<td class="feedback-{{ product.product_id }}">{{ product.all_feedback }}</td>-->
                                                <td class="sum-{{ product.product_id }} {% if not product.transactions_in_last_six_months %}loading{% endif %}">{{ product.transactions_in_last_six_months }}</td>
                                                <td class="order-{{ product.product_id }}"> {{ product.orders }}</td>
                                                <td class="time-{{ product.product_id }}">{{ product.product_update_date|date:"Y/m/d" }}<br>{{ product.product_update_date|date:"H:i:s" }}</td>
                                                <td sta-{{ product.product_id }}>
                                                {% if product.is_remove %}
                                                    <p>产品已经下架<br></p>
                                                {% else %}
                                                    {% if product.status %}<button id="s-{{ product.product_id }}" class="btn btn-icon btn-success m-b-4"><i class="fa fa-check-circle"></i></button>{% else %}<button id="s-{{ product.product_id }}" onclick="get_product('{{ product.product_id }}')" class="btn btn-icon btn-purple m-b-4"><i class="zmdi zmdi-play-circle"></i></button> {% endif %}
                                                  {% if product.status_trans %}<button id="s2-{{ product.product_id }}" class="btn btn-icon btn-success m-b-4"><i class="fa fa-check-circle"></i></button>{% else %} <button id="s2-{{ product.product_id }}" onclick="get_transactions('{{ product.product_id }}')" class="btn btn-icon btn-inverse m-b-4"><i class="zmdi zmdi-play-circle"></i></button>{% endif %}{% endif %}
                                                     {% if user in product.user.all %}<button class="btn btn-icon btn-info m-b-4"  onclick="cancelFav({{ product.product_id }})" id="fav-{{ product.product_id }}" ><i class="fa fa-heart" title="取消收藏"></i></button>{% else %}<button class="btn btn-icon btn-info m-b-4"  onclick="addfav({{ product.product_id }})" id="fav-{{ product.product_id }}" ><i class="fa fa-heart-o" title="收藏商品"></i></button>{% endif %}
                                              </td>
                                              </tr>
                                            {% endfor %}
                                            </tbody>
                                        </table>

                                    </div>
                                </div>

                                <div class="">
                            <ul class="pagination">
              {% if productList.has_previous %}
            <li>
              <a href="{% if wd %}?word={{ wd }}&{% else %}?{% endif %}page={{ productList.previous_page_number }}{% if o %}&o={{ o }}{% endif %}{% if store %}&store={{ store }}{% endif %}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
                  {% else %}
                  <li class="disabled">
              <a href="#" aria-label="Previous">
                <span aria-hidden="false">&laquo;</span>
              </a>
            </li>
              {% endif %}
          {% for p in productList.paginator.page_range %}
          {% ifequal p productList.number %}
            <li class="active"><a href="#">{{ p }}</a></li>
              {% else %}
              <li><a href="{% if wd %}?word={{ wd }}&{% else %}?{% endif %}page={{ p }}{% if o %}&o={{ o }}{% endif %}{% if store %}&store={{ store }}{% endif %}">{{ p }}</a></li>
          {% endifequal %}
        {% endfor %}
          {% if productList.has_next %}
            <li>
              <a href="{% if wd %}?word={{ wd }}&{% else %}?{% endif %}page={{ productList.next_page_number }}{% if o %}&o={{ o }}{% endif %}{% if store %}&store={{ store }}{% endif %}" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          {% else %}
              <li class="disabled">
              <a href="#" aria-label="Next">
                <span aria-hidden="false">&raquo;</span>
              </a>
            </li>
          {% endif %}
          </ul>
                        </div>
                            </div>



                        </div> <!-- End Row -->


                

            </div>

            <!-- Page Content Ends -->
            <!-- ================== -->

            <!-- Footer Start -->
            {% include 'velonic/block/footer.html' %}
            <!-- Footer Ends -->



        </section>
        <!-- Main Content Ends -->











        <!-- js placed at the end of the document so the pages load faster -->
        <script src="{% static '' %}velonic/js/jquery.js"></script>
        <script src="{% static '' %}velonic/js/bootstrap.min.js"></script>
        <script src="{% static '' %}velonic/js/pace.min.js"></script>
        <script src="{% static '' %}velonic/js/wow.min.js"></script>
        <script src="{% static '' %}velonic/js/jquery.nicescroll.js" type="text/javascript"></script>

        <!-- Modal-Effect -->
        <script src="{% static '' %}velonic/js/classie.js"></script>

        <script src="{% static '' %}velonic/js/jquery.app.js"></script>

        <!-- Datatables-->
        <script src="{% static '' %}velonic/js/datatables/jquery.dataTables.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/dataTables.bootstrap.js"></script>
        <script src="{% static '' %}velonic/js/datatables/dataTables.buttons.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/buttons.bootstrap.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/jszip.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/pdfmake.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/vfs_fonts.js"></script>
        <script src="{% static '' %}velonic/js/datatables/buttons.html5.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/buttons.print.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/dataTables.fixedHeader.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/dataTables.keyTable.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/dataTables.responsive.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/responsive.bootstrap.min.js"></script>
        <script src="{% static '' %}velonic/js/datatables/dataTables.scroller.min.js"></script>
        <script src="{% static '' %}velonic/js/bootstrap-datetimepicker.min.js"></script>
        <script src="{% static '' %}velonic/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

        <!-- Datatable init js -->
        <script src="{% static '' %}velonic/js/datatables.init.js"></script>
        <script src="{% static '' %}velonic/js/sweet-alert.min.js"></script>

        <script src="{% static '' %}velonic/js/preview.js"></script>

        <script type="text/javascript">
            $(function(){
                if($('a.preview').length){
                    var img = preloadIm();
                    imagePreview(img);
                }
            })
        </script>



        <script type="text/javascript">

            var dtTranslate={//下面是一些汉语翻译
                "sSearch": "搜索",
                "sLengthMenu": "每页显示 _MENU_",
                "sZeroRecords": "没有检索到数据",
                "sInfo": "显示 _START_ 至 _END_ 条 &nbsp;&nbsp;共 _TOTAL_ 条 &nbsp;&nbsp;",
                "sInfoFiltered": "(筛选自 _MAX_ 条数据)",
                "sInfoEmtpy": "没有数据",
                "sProcessing": "<img src='/public/images/loading.gif' /> 数据加载中...",
                "oPaginate":
                            {
                                "sFirst": "首页",
                                "sPrevious": "前一页",
                                "sNext": "后一页",
                                "sLast": "末页"
                            }
            }


            $(document).ready(function() {
                $('#datatable').DataTable({"oLanguage": dtTranslate});
                var table = $('#datatable-fixed-header').DataTable( { fixedHeader: true,"oLanguage": dtTranslate } );
            } );
            TableManageButtons.init();





        </script>
<script>
      $(".loading").html('<img src="{% static "images/loading_sm.gif" %}" width=50 />');
      function get_transactions(productId){
          //alert("开始采集交易记录。。。");
          swal({
            title: "采集任务即将执行!",
            text: "3秒后开始采集.",
            timer: 3000,
            showConfirmButton: false
        });
          $.post("{% url 'aliexpress:signle_product_transactions' %}",{productId:productId},function(result){
              //$("span").html(result);
              if(result.error==1){
                  //alert(result.msg);
                  swal("失败", result.msg, "error");
                  return false;
              }else{
                  $(".sum-"+productId).html(result.transactions);
                  $(".time-"+productId).html(result.update_time);
                  var s = $("#s2-"+productId);
                  s.removeClass('btn-inverse');
                  s.addClass('btn-success');
                  s.html('<i class="fa fa-check-circle"></i>');
                  s.removeAttr('onclick');
                  //$(".sta-"+productId).html('<i class="glyphicon glyphicon-ok-sign"></i>');
                  //alert("采集完毕！");
                   swal("采集完毕!");
              }
          });
      }

      function get_product(productId){
          swal({
            title: "采集任务即将执行!",
            text: "3秒后开始采集.",
            timer: 3000,
            showConfirmButton: false
        });
          $.post("{% url 'aliexpress:signle_product_detail' %}",{productId:productId},function(result){
              //$("span").html(result);
              if(result.error==1){
                  //alert(result.msg);
                  swal("失败", result.msg, "error");
                  return false;
              }else{
                  if(result.lowPrice == result.highPrice){
                      $(".price-"+productId).html((result.lowPrice).toFixed(2));
                  }else{
                      $(".price-"+productId).html((result.lowPrice).toFixed(2)+' - '+(result.highPrice).toFixed(2));
                  }

                  $(".wish-"+productId).html(result.wishList);
                  $(".order-"+productId).html(result.orders);
                  $(".votes-"+productId).html(result.votes);
                  $(".rating-"+productId).html(result.averageStarRating);
                  $(".feedback-"+productId).html(result.allFeedback);
                  var s = $("#s-"+productId);
                  s.removeClass('btn-purple');
                  s.addClass('btn-success');
                  s.html('<i class="fa fa-check-circle"></i>');
                  s.removeAttr('onclick');
                  //alert("采集完毕。。。");
                  swal("采集完毕!");
              }
          });
      }


        function addfav(id){
          //location.href = "{% url 'aliexpress:monitor_add' %}?id="+id
          //location.href = "{% url 'favorite_add' %}?id="+id;
            $.get("{% url 'favorite_add' %}?id="+id, function(result){
                if(result=='1'){
                    $('#fav-'+id).html('<i class="fa fa-heart" title="取消收藏"></i>');
                    //$('#fav-'+id).removeAttr('onclick');
                    $('#fav-'+id).attr('onclick','cancelFav(\''+id+'\')');
                    swal({
                        title: "操作成功!",
                        text: "成功收藏商品［"+id+"］!",
                        timer: 1000,
                        showConfirmButton: true
                    });
                }else{
                    swal("收藏失败", "error");
                }
              });
      }

        function cancelFav(id){
          swal({
            title: "你确定取消收藏此商品吗?",
            text: "此商品将从收藏列表移除!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "是, 取消收藏 !",
            cancelButtonText: "否, 继续收藏 !",
            closeOnConfirm: false,
            closeOnCancel: false
        }, function(isConfirm){
            if (isConfirm) {
                $.get("{% url 'favorite_remove' %}?id="+id, function(result){
                if(result=='1'){
                    $('#fav-'+id).html('<i class="fa fa-heart-o" title="收藏商品"></i>');
                    $('#fav-'+id).attr('onclick','addfav(\''+id+'\')');
                    swal({
                        title: "操作成功!",
                        text: "成功移除商品［"+id+"］!",
                        timer: 1000,
                        showConfirmButton: false
                    });
                }else{
                    swal("取消收藏失败", "error");
                }
              });
            }else {
                swal("已取消", "放弃操作", "error");
            }
        });
      }




  </script>
        <link rel="stylesheet" href="{% static '' %}velonic/css/compare.css"/>
        <script src="{% static '' %}velonic/js/compare.js"></script>



  <div id="rightFloat" class="right_float">
    <div class="online_consult">

    </div>
    <div class="watch_compare">
        <p class="title">产品对比</p>
        <div class="compare_container">
            <ul class="compare_list">
                {% if compare_goods %}
                    {% for g in compare_goods %}
                    <li compare-index="{{ forloop.counter0 }}">
                    <a href="javascript:;"><img src="{{ g.thumb }}" width="68" height="68" alt="" /></a>
                    <a class="close" href="javascript:;" onclick="floatRemoveCompare({{ g.product_id }})"></a>
                    </li>
                    {% endfor %}
                    {% for x in empty_goods %}
                        <li compare-index="{{ x }}"><p class="add_compare"><a href="#">添加</a></p></li>
                    {% endfor %}
                {% else %}
                <li compare-index="0"><p class="add_compare"><a href="#">添加</a></p></li>
                <li compare-index="1"><p class="add_compare"><a href="#">添加</a></p></li>
                <li compare-index="2"><p class="add_compare"><a href="#">添加</a></p></li>
                <li compare-index="3"><p class="add_compare"><a href="#">添加</a></p></li>
                <li compare-index="4"><p class="add_compare"><a href="#">添加</a></p></li>
                {% endif %}
            </ul>
            <p class="btn_compare"><a href="#" id="consultant">开始对比</a></p>
        </div>
    </div>
    <p id="back-to-top" style="display: block;"><a href="#top">返回顶部</a></p>
</div>



    {% include 'velonic/block/footer_comm.html' %}








    </body>
</html>
